import styled from "styled-components";
import playBg from '../../../assets/images/play.png'
export const MusicClubCategoryBox = styled.div`
  background-color:#fafafa;
  padding-bottom: 30px;
  h2{
    font-size: 30px;
    padding: 5px 0;
    border-bottom:  2px solid #3ac27c;
    span{
      font-size: 14px;
      margin-left: 10px;
      padding: 4px 8px;

      &:hover{
        cursor: pointer;
      }
      &.active{
        border-radius: 5px;
        background-color: #3ac27c;
        color: #ffffff;
      }
    }
  }
  .itemBox{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .item{
      width: 224px;
      height: 280px;  
      font-size: 14px;
      margin-bottom: 15px;
      .pic{
        position: relative;
        cursor: pointer;
        &:hover{
          img{
            filter: brightness(55%);
          }
          .pic_play{
            opacity: 1;
            background: url(${playBg}) center/70px no-repeat;
          }
        }
        .pic_play{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          width: 80px;
          height: 80px;
          background: url(${playBg}) center/50px no-repeat;
          opacity: 0;
          transition: all .4s;
        }
      }
      .item_name{
        
        &:hover{
          cursor: pointer;
          color: #3ac27c;
        }
      }
      .item_playCount{
        color: #999999;
      }
    }
  }

`